 <template>
    <div class="hello">
      <div v-if="this.$route.path !=='/about'" class="header">
        <div class="front_bg">
          <h1>{{infoList.i_title}}</h1>
          <span>{{infoList.i_subtitle}}</span>
        </div>
        <div class="nav">  
            <router-link to="/index" tag="div" class="nav_index">首页</router-link>
            <div class="nav-item" v-for="items in navList" :key="items.c_name" @click="handleNavClick(items.id,items.c_name)">
                  {{items.c_name}}
            </div>
            <div @click="about" class="nav_about">关于我们</div>         
        </div> 
      </div>
        <div class="main">
          <router-view></router-view> 
        </div>
        <div class="footer">
          <p class="lr">底部信息</p>
        </div>  
    </div>

</template>

<script>

export default {
    name:"AddUser",
    data(){
        return{
            articleList:[],           
            curCate:"首页",
            form:[],
            navList:[],
            username:'',
            adminName:localStorage.getItem('adminName'),
            adminLastLoginAt:localStorage.getItem('adminLastLoginAt'),
            change:[],
            infoList:[],
            adminId:localStorage.getItem('adminId'),
            i_title:"",
            i_subtitle:""
        }
    },
    created(){
        this.getAllCate()
    },
    watch:{
      'change':function(){
                // console.log(this.change)
            }
    },
    mounted(){
      this.username = localStorage.getItem('name')     
    },
    
    methods:{
        getAllCate(){
            
            // 获取分类数据
            this.$axios.get("/cate/all").then(res=>{
              this.navList = res.data;
            }) 
            // 获取博客信息
            this.$axios.get("/info/all").then(res=>{   
              let infoarr=[]
              infoarr = res.data.filter(item=>item.user_info==this.adminId)
              this.infoList = infoarr[0]
            })
                  
        },
        
        handleNavClick(id,name){
     
          this.change = name
          this.$router.push("/cate/"+id)
        },
        about(){
          this.$router.push("/about")
        }
    }
 
};
</script>

<style scoped>
.hello{
  display: flex;
  flex-direction: column;
  /* position: relative; */
}
.main{
  flex: 1;
}
.hello{
  height: 100%;
}
.nav {
  display: flex;
  /* justify-content:; */
  background: #717172;
  height: 26px;
  width: 100%;
  padding-left: 13.7%;
  box-sizing: border-box;
}

.nav_index,.nav_about,.nav-item{
  font-size: 15px;
  line-height: 26px;
  cursor: pointer;
  border: 1px soild red;
  padding: 0 30px;
}
.nav-item:hover{
  background: rgb(22, 21, 21);
  color: white;
}
.nav_about:hover{
  background: rgb(22, 21, 21);
  color: white;
}
.nav_index:hover{
  background: rgb(22, 21, 21);
  color: white;
}

  .front_bg{
    background:#21252b;
    height: 150px;
    width: 100%;
    padding:20px 16%;
    color: white;
    box-sizing: border-box;
  }


  h1{
    margin:0; 
    padding:5px 0; 
    width:400px; 
    color:#1f7fbb; 
    font:normal 46px/1.2em Arial, Helvetica, sans-serif; 
    letter-spacing:-2px;
  }
  
  .el-header {
    background-color: #B3C0D1;
    line-height: 60px;
    color: #fff;
    height:100px;
  }
 
  .el-main{
    padding: 0;
  }
  .el-header{
      display: flex;
      justify-content: space-between;
      
  }
.footer{
  height: 100px;
  width: 100%;
  background-color: #252627;
  
 
  color: white;
  padding: 20px;
  box-sizing: border-box;
  
}
 
</style>